<template>
	<view class="root">
		<view class="user-header">
			<view class="user-header-left">
				<view>
					<text class="remind">Hi,</text>
					<text class="user-name">{{userInfo['userName']?userInfo['userName']:'快点头像登录吧'}}</text>
				</view>
				<text class="user-sign">让爱延续,分享你的生活</text>
			</view>
			<view class="user-header-right" @click="clickHeaderImage">
				<u-avatar size="109" :src="userInfo['pictureUrl']"></u-avatar>
			</view>
		</view>
		<view class="week-calendar">
			<view class="week-day" hover-class="small-hover" v-for="(item,index) in week" :key="item">
				<view :class="(weekCurrent==getDay(index)?'week-active':'')" style="display: flex;justify-content: space-evenly;flex-direction: column;padding: 0 18rpx;">
					<text style="display: block;margin-top: 10rpx;margin-bottom: 10rpx;">{{item}}</text>
					<text style="text-align: center;">{{getDay(index)}}</text>
					<view class="week-calendar-point"></view>
				</view>
			</view>
		</view>
		<view class="plan-clock-header">
			<text>打卡</text>
			<view class="plan-clock-add" hover-class="hover-class" @click="addPlanClick" v-if="userInfo">
				<u-icon name="plus" size="29"></u-icon>
			</view>
		</view>
		<view class="clock-empty" v-if="!userInfo">
			<empty-card-btn @click="clickAddPlan" info="还没有计划书哦~" text="去添加"></empty-card-btn>
		</view>
		<scroll-view :scroll-with-animation="true" :enable-flex="true" :scroll-x="true" class="scroll-X"  v-if="userInfo">
			<view style="width: 100%;display: flex;margin:0 28rpx;">
				<plan-card @clickCard="planClickCard"  @clickBtn="planClickClock" v-for="(item,index) in planList" :key="item.Id" :info="item" :index="index"></plan-card>
			</view>
		</scroll-view>
		<view style="padding: 16rpx 24rpx;width: 100%;">
			<u-tabs :list="list" :is-scroll="true" :current="tabsCurrent" @change="tabsChange" active-color="#6D39E9"
				bg-color="#fff">
			</u-tabs>
		</view>
		<view class="clock-empty" v-if="!userInfo">
			<empty-card-btn info="还没有关联朋友哦~" text="去邀请" key_id="my-plan"></empty-card-btn>
		</view>
		<view  v-if="userInfo" style="padding: 16rpx 43rpx;width: 100%;margin-bottom: 10rpx;"  v-for="(item,index) in planCommonList[tabsCurrent]" :key="item.Id">
			<plan-common-card @planClickBtn="clockCommonClick" :info="item" :index="index"></plan-common-card>
		</view>
		
		<u-popup border-radius="72" :closeable="true" v-model="isCommon" mode="bottom" height="585rpx">
			<view style="display: flex;justify-content: center;line-height: 100rpx;">
				<text style="font-size: 29rpx;">提醒打卡</text>
			</view>
			<view style="padding: 30rpx;">
				<textarea v-model="clockCommonText" style="background-color: rgba(0,0,0,0.02);padding: 30rpx;width:633rpx; " placeholder-style="color: #b8b7b9;" placeholder="写下你甜甜的提醒" />
				<view style="width: 100%;">
					<button @click="clockCommonBtn" type="default" style="margin: 0;background-color: #6D39E9;border: none;color: #fff;font-size: 30rpx;font-weight: 500;"  >确定提醒</button>
				</view>
			</view>
		</u-popup>
	
		<u-tabbar :list="vuex_tabbar" :mid-button="true" @change="clickTabbar" :current="0"></u-tabbar>
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
import {Plan} from '../../model/plan.js'
let dayjs = require('dayjs')
export default {
	data() {
		return {
			week:["日","一","二","三","四","五","六"],
			weekCurrent:4,
			tabsCurrent:0,
			list: [{
				name: '关联朋友'
			}
			],
			planList:[
				{
					"Id":1,
					"planName":"情侣基金计划",
					"lable":"共同计划",
					"planDescription":"一起来存钱吧"
				},
				{
					"Id":2,
					"planName":"情侣基金计划",
					"lable":"共同计划",
					"planDescription":"一起来存钱吧"
				},
			],
			planCommonList:[
				
			],
			isCommon:false,
			userInfo:"",
			clockCommonText:""
		}
	},
	computed: {
		...mapState(['vuex_tabbar','fristLogin'])
	},
	async onLoad() {
		this.initData();
		
	},
	mounted() {
		var now = dayjs()
		this.weekCurrent=dayjs().date();
	},
	onShow(){
		const userInfo = uni.getStorageSync('userInfo');
		this.userInfo = userInfo;
		if(this.fristLogin){
			this.initData();
			this.$u.vuex('fristLogin', false);
		}
	},
	computed:{
		
	},
	methods: {
		clickAddPlan(){
			uni.navigateTo({
				url:'/pages/plan/add-plan'
			})
		},
		clockCommonBtn(e){
			uni.showToast({
				title:"提醒成功"
			})
			this.clockCommonText='';
			setTimeout(()=>{
				this.isCommon=false
			},1000)
		},
		initData(){
			uni.showLoading({
				title:"加载中"
			})
			const today = dayjs().format('YYYY-MM-DD');
			const plan = Plan.getDatePlan(today).then((res)=>{
				 if(res&&res.length>0) this.planList = res;
				 uni.hideLoading();
			});
			const planCommon = Plan.getFindFriendAndPlan(today).then((res)=>{
				 const {tabs,plan:planList} = res;
				 if(tabs&&tabs.length>0) {
					 this.list = tabs;
					 this.planCommonList = planList;
				 }
			}); 
		},
		addPlanClick(){
			uni.navigateTo({
				url:"/pages/plan/add-plan"
			})
		},
		getDay(index){
			return dayjs().day(index).get('date')
		},
		getToday(){
			// return 
		},
		clickTabbar(){
			
		},
		clickHeaderImage(){
			uni.navigateTo({
				url:"../my/my"
			})
		},
		planClickCard(e){
			this.$u.vuex('planViewData', e.info)
			uni.navigateTo({
				url:"/pages/plan/plan"
			})
		},
		tabsChange(e){
			this.tabsCurrent=e;
		},
		planClickClock(e){
			const {info,index} = e;
			uni.reLaunch({
				url:"/pages/send/send?info="+JSON.stringify(info)
			})
			// const clock = Plan.sendClockInPlan(info.planId);
			// uni.showToast({
			// 	title:"打卡成功"
			// })
			// this.$set(this.planList,index,{...this.planList[index],isClocked:'1'});
		},
		clockCommonClick(e){
			const {info,index} = e;
			console.log(info,index)
			this.isCommon=true;
			// Plan.sendRemindRemind({
			// 	planId:info.planId,
			// 	userId:this.planCommonList[this.tabsCurrent].userId
			// }).then(res=>{
			// 	uni.showToast({
			// 		title:"提醒成功"
			// 	})
			// }).catch(res=>{
			// 	uni.showToast({
			// 		title:"提醒失败"
			// 	})
			// })
			
		}
	},
	
}
</script>

<style lang="scss">

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
.user-header{
	display: flex;
	width: 100%;
	padding: 43rpx 58rpx;
	justify-content: space-between;
}
.user-header-right{
	display: flex;
	align-items: center;
}
.remind{
	font-size: 72rpx;
	font-weight: 700;
	color: #6d39e9;
}
.user-name{
	font-size: 33rpx;
	font-weight: 500;
	color: #000000;
}
.user-sign{
	font-size: 25rpx;
	font-weight: 500;
	color: rgba(0,0,0,0.60);
	margin-top: 14rpx;
}
.week-calendar{
	width: 576rpx;
	height: 123rpx;
	background: #ffffff;
	border-radius: 18rpx;
	font-size: 25rpx;
	font-weight: 500;
	box-shadow: 0rpx 33rpx 91rpx 0rpx rgba(125,106,237,0.25), 0rpx 11rpx 14rpx 0rpx rgba(125,106,237,0.10); 
	margin-top: 40rpx;
	display: flex;
	.week-calendar-point{
		width: 11rpx;
		height: 11rpx;
		background: #ffffff;
		border-radius: 50%;
		margin: 10rpx auto;
	}	
}
.week-day{
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 5rpx 0;
	text{
		display: block;
	}
}
.week-active{
	color: #fff;
	background: #7d6aed;
	border-radius: 14rpx;
}
.plan-clock-header{
	width: 100%;
	padding: 10rpx 58rpx;
	display: flex;
	align-items: center;
	justify-content:space-between;
	margin-top: 51rpx;
	font-size: 36rpx;
	font-weight: 700;
	color: #000000;
	.plan-clock-add{
		width:51rpx;
		height:51rpx;
		background: #7D6AED;
		color: #fff;
		border-radius: 11rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0rpx 4rpx 7rpx 0rpx rgba(48,0,255,0.39); 
	}
}
.scroll-X{
	height: 360rpx;
	width: 100vw;
	display: flex;
}
.clock-empty{
	margin: 50rpx 0;
}
</style>
